<script setup>
import {goCommunity} from "../../tools/go";
const list = [
  {id:1,name:"社区居民",span:"社区居住民一个信息填报",img:'src/static/img/indeximg/kjfs/xiaoqubg.png'},
  {id:2,name:"个人信息",span:"个人信息查看",img:'src/static/img/indeximg/kjfs/xiaoqubg.png'},
  {id:3,name:"社区管理人员",span:"核验社区人员信息",img:'src/static/img/indeximg/kjfs/xiaoqubg.png'},
]
</script>

<template>
  <view class="bg">
    <view class="titli">
      <v-icon @click="goCommunity()" class="icon" icon="mdi-chevron-left"></v-icon>
      <h3>户籍管理</h3>
    </view>
  </view>
<!-- div -->
  <view class="nav">
    <ul>
      <li v-for="item in list">
        <img :src="item.img">
        <view class="box">
          <h4>{{ item.name }}</h4>
          <text>{{ item.span }}</text>
        </view>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
.nav{
  ul{
    li{
      img{
        width: 109px;
        height: 109px;
      }
      .box{
        text{
          color: #cacaca;

        }
        h4{
          font-size: 30px;
          font-weight: 500;
          margin: 9px 1px;
        }
        margin-left: 10px;
      }
      display: flex;
      align-items: center;
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border-radius: 12px;
      background: #FFFFFF;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    display: flex;
    flex-direction: column;
  }
  position: relative;
  top: -40px;
  width: 90%;
  margin: 0 auto;
}

.bg{
  .titli {
    h3 {
      font-size: 25px;
      color: #000000;
      text-align: center;
      font-weight: 400;
    }
    .icon {
      position: absolute; /* 将 icon 脱离文档流 */
      left: 10px;
      font-size: 40px;
    }
    position: relative; /* 父容器设置为相对定位 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 100%;
    height: 8vh;
  }
  position: relative; // 或 absolute，根据需要选择
  width: 100%;
  height: 300px;
  background-image: url("../../static/img/indeximg/kjfs/社区新闻1图片.png");
  background-size: cover; // 或 contain，根据需要选择
  background-position: center; // 确保图片居中
  background-repeat: no-repeat;
}
</style>